import { useGetLessonById } from "@/entities/lesson/model/useGetLessonById"
import { UiButton } from "@/shared/Uikit"
import { UiTextField } from "@/shared/Uikit/UiTextField"
import { useEffect, useState } from "react"
import { UiSpinner } from "@/shared/Uikit/UiSpinner"
import { ILesson, IModel } from "@/shared/interfaces"
import { UiSelectField } from "@/shared/Uikit/UiSelectField"
import { useGetAllModels } from "@/entities/interactiveModelBlock/model/useGetAllModels"
import UploadModelFileForm from "./UploadModelFileForm"
import SetupInteractiveModel from "./SetupInteractiveModel"


type CreateInteractiveModelBlockFormProps = {
    onSuccess?: (modelId: number) => void
}

export default function CreateInteractiveModelBlockForm(props: CreateInteractiveModelBlockFormProps) {
    const models = useGetAllModels()
    const [path, setPath] = useState<string>()
    const [name, setName] = useState<string>()
    return (
        <>
            <div>
                <h2>Модель</h2>
                {!!models.models &&
                    <UiSelectField
                        label="Выберите модель из загруженных:"
                        options={models.models.map((model) => {
                            return {
                                label: model.name,
                                value: model.id.toString()
                            }
                        })}
                        selectProps={{
                            onChange: (e) => {
                                if (props.onSuccess) {
                                    props.onSuccess(+e.target.value)
                                }
                            }
                        }}
                    />
                }
                <UploadModelFileForm onSuccess={(res) => {
                    setName(res.filename)
                    setPath(res.path)
                }} />
                {path && name &&
                    <SetupInteractiveModel
                        modelFilePath={path}
                        name={name}
                        onSuccess={(response) => {
                            if (props.onSuccess) {
                                props.onSuccess(response.id)
                            }
                        }}
                    />
                }
            </div>
        </>
    )
}